<template>
    <div class="login-view">
        <div class="login-box">
            <div class="logo-box">
                <img src="@/assets/images/hanbao.webp">
            </div>
            <div class="login">
                <h3>商家登陆界面</h3>
                <div class="form-box">
                    <el-input v-model="phoneNumber" placeholder="请输入手机号" ></el-input>
                    <el-input v-model="password" type="password" placeholder="请输入密码"></el-input>
                </div>
                <el-button id="login-button" type="primary" @click="login" round>登陆</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import api from '@/api/login'
export default {
    data() {
        return {
            phoneNumber: '',
            password: '',
        }
    },
    methods:{
        login(){
            let phoneNumber = this.phoneNumber
            let password = this.password

            let data = {
                phoneNumber,
                password
            }
            this.$axios.post(api.LOGIN, data)
            .then(res => {

                if(res.code == 200){
                    sessionStorage.setItem('token', res.data.token)
                    this.$router.push({name: 'store'})
                    this.$success("登陆成功")
                }

                else this.$error(res.message)
            })
        }
    }
}
</script>

<style scoped>
.login-view{
    display:flex;
    align-content: center;
    
    background-color:  rgb(134, 133, 133, 0.2);
    /* background-color: #FDCF41; */
    height: 100vh;


    }

.logo-box {
    background-color: rgb(250, 189, 3);
    border-radius: 8px 0 0 8px;
    height: 100%;
    /* width:50%; */
}

.logo-box>img {
    width: 100%;
    height: 100%;
}

.login-box {
    width: 50%;
    margin: auto;

    display: flex;
    align-items: center;

    background-color: white;
    border-radius: 8px;

}

.login {
    text-align: center;
    padding: 10px;
}

.login>.form-box>.el-input {
    margin: 10px 0;
}

#login-button {
    width: 100%;
}
</style>